import { View, Text, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import './index.less';
import { AtModal, AtModalContent, AtSwitch } from 'taro-ui';
import {IPLAND_OSS_HOST} from '../../../constant';
import 'taro-ui/dist/style/components/modal.scss';

interface ISettingProps {
  isOpened: boolean;
  onCancel: Function;
}

// export default class Setting extends Component<any, any> {
export default class Setting extends Component<ISettingProps, any> {
  constructor(props) {
    super(props);
    this.state = {
      musicValue: false,
      soundValue: false
    };
  }

  musicChange = value => {
    this.setState({ musicValue: value })
  }

  soundChange = value => {
    this.setState({ soundValue: value })
  }

  render() {
    let { isOpened } = this.props;
    return (
      <View className="setting_box">
        <AtModal isOpened={isOpened} closeOnClickOverlay={false}>
          <AtModalContent>
            <View className="topFirst">
              <Text className="setting-title">设置</Text>
              <Image
                className="close"
                src={`${IPLAND_OSS_HOST}home/close.png`}
                onClick={() =>
                  this.props.onCancel()
                }>
              </Image>
            </View>
            <View className="box">
              <View className="row">
                <Text className="name">音乐</Text>
                <AtSwitch checked={this.state.musicValue} onChange={this.musicChange} className="switch" />
                {/* </AtForm> */}
              </View>
              <View className="row">
                <Text className="name">音效</Text>
                <AtSwitch checked={this.state.soundValue} onChange={this.soundChange} />
              </View>
            </View>
          </AtModalContent>

        </AtModal>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
